<template>
    <div class="tabbar">
        <tablist
            v-for="(item, index) of arr" :key="index"
            :data="item"
            :class="{on: item.state}"
            @click.native="stateChange(index)"
        />
    </div>
</template>

<script>
import tablist from "./components/tabbarasse.vue"

export default {
  name: "tabbar",
  components: {
      tablist
  },
  data() {
    return {
      str: "",
      arr: [
        {
          src: "https://img1.baidu.com/it/u=3913079469,73413634&fm=26&fmt=auto",
          srcHo: "https://img1.baidu.com/it/u=2951389098,2147014562&fm=26&fmt=auto",
          text: "首页",
          state: true,
          path: "/"
        },
        {
          src: "https://img1.baidu.com/it/u=3913079469,73413634&fm=26&fmt=auto",
          srcHo: "https://img1.baidu.com/it/u=2951389098,2147014562&fm=26&fmt=auto",
          text: "联系",
          state: false,
          path: "/contact"
        },
        {
          src: "https://img1.baidu.com/it/u=3913079469,73413634&fm=26&fmt=auto",
          srcHo: "https://img1.baidu.com/it/u=2951389098,2147014562&fm=26&fmt=auto",
          text: "发现",
          state: false,
          path: "/find"
        },
        {
          src: "https://img1.baidu.com/it/u=3913079469,73413634&fm=26&fmt=auto",
          srcHo: "https://img1.baidu.com/it/u=2951389098,2147014562&fm=26&fmt=auto",
          text: "我的",
          state: false,
          path: "/userprofile"
        }
      ]
    }
  },
  watch: {
    $route(val) {
      this.arr.some(item => {
        if (val.path === item.path) item.state = true
        else item.state = false
      })
    }
  },
  methods: {
    stateChange(index) {
      this.str = this.$route.path;
      this.arr.some(item => {
          item.state = false;
      })
      this.arr[index].state = true;
      let path = this.arr[index].path
      this.$router.push(path).catch(() => {})
    }
  }
}
</script>

<style>
  .tabbar {
      display: flex;
      justify-content: space-around;
      align-content: center;

      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
  }
  .on {
      color: pink;
  }
</style>